<template>
  <div class="container">
    <div class="header">生产产出</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import commomOption from './commomOption.ts'
import * as echarts from 'echarts'

const option = {
  tooltip: commomOption.tooltip,
  legend: commomOption.legend,
  grid: commomOption.grid,
  xAxis: Object.assign({}, commomOption.xAxis, {
    data: ['小数控', '中数控', '紧密数控'],
  }),
  yAxis: commomOption.yAxis,
  series: [
    {
      name: '1-3月',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(12, 123, 236, 1)' },
          { offset: 1, color: 'rgba(1, 25, 46, 0.9)' },
        ]),
      },
      barMaxWidth: 40, // 设置柱子的最大宽度为30
      data: [120, 132, 101],
    },
    {
      name: '4-6月',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(1, 254, 246, 1)' },
          { offset: 1, color: 'rgba(1, 25, 46, 0.9)' },
        ]),
      },
      data: [290, 330, 310],
    },
    {
      name: '7-9月',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(246, 169, 68, 1)' },
          { offset: 1, color: 'rgba(1, 25, 46, 0.9)' },
        ]),
      },
      data: [150, 330, 410],
    },
  ],
}
const pictorialBarData = new Array(option.series[0].data.length).fill(0)
for (var i = 0; i < 3; i++) {
  option.series[i].zindex = i + 1
  pictorialBarData.map((item, idx) => {
    pictorialBarData[idx] = item + option.series[i].data[idx]
  })
  console.log(pictorialBarData)
  option.series.push({
    z: i + 10,
    type: 'pictorialBar',
    symbolPosition: 'end',
    symbol: 'diamond',
    symbolOffset: [0, '-50%'],
    symbolSize: [40, 10],
    data: [...pictorialBarData],
    itemStyle: option.series[i].itemStyle,
    tooltip: { show: false },
  })
}
// 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { proxy } = getCurrentInstance()
// 获取echart挂载的DOM节点
const echartsBox = ref()
// echartsf弹窗出现
function echartInit() {
  //nextTick后再调用，不然会报错
  nextTick(() => {
    // echarts初始化
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)

    // 根据页面大小自动响应图表大小
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}

echartInit()
</script>
<style lang="less" scoped>
@import url(./container.less);
</style>
